<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a href="/home">home</a>
    <a href="/about">about</a>

    <div id="content">Default</div>
  </div>

  <script>
    const contentEl = document.querySelector('#content');
    const changeContent = () => {
      switch(location.pathname) {
        case "/home":
          contentEl.innerHTML = "Home";
          break;
        case "/about":
          contentEl.innerHTML = "About";
          break;
        default: 
          contentEl.innerHTML = "Default";
      }
    }

    const aEls = document.getElementsByTagName("a");
    for (let aEl of aEls) {
      aEl.addEventListener("click", e => {
        e.preventDefault();
        
        const href = aEl.getAttribute("href");
        // history.replaceState({}, "", href); 
        history.pushState({}, "", href);

        changeContent();
      })
    }

    window.addEventListener("popstate", changeContent)
  </script>
</body>
</html>